<template>
  <el-dialog v-model="showDialog" title="添加前台" width="500px"
             :close-on-click-modal="false"
  >
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rulesType"
        label-width="80px"
        class="demo-ruleForm"
        status-icon
    >
      <el-form-item label="账号" prop="username" style="max-width: 300px;width: 100%">
        <el-input v-model="ruleForm.username"/>
      </el-form-item>
      <el-form-item label="姓名" prop="name" style="max-width: 300px;width: 100%">
        <el-input v-model="ruleForm.name"/>
      </el-form-item>
      <el-form-item label="性别" prop="sex" style="max-width: 300px;width: 100%">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="MALE" border>男</el-radio>
          <el-radio label="FEMALE" border>女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="phone" style="max-width: 300px;width: 100%">
        <el-input v-model="ruleForm.phone"/>
      </el-form-item>
      <el-form-item label="密码" prop="password" style="max-width: 300px;width: 100%">
        <el-input
            maxlength="20"
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="密码确认" prop="checkPassword" style="max-width: 300px;width: 100%">
        <el-input
            maxlength="20"
            v-model="ruleForm.checkPassword"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          添加
        </el-button>
      </el-form-item>

    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import type {FormRules, FormInstance} from "element-plus";
import $api from "@/api";
import {ElNotification} from "element-plus";

const showDialog = ref(false)
const dialogModel = ref('create')
const validateUsername = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    var pattern = /^[a-zA-Z0-9]+$/;
    if (pattern.test(value)) {
      callback()
    } else {
      callback(new Error('账号只能包括数字和字母'))
    }
  }
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value.length < 6) {
    callback(new Error('至少6个字符'))
  } else {
    if (ruleForm.checkPassword !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPassword', () => null)
    }
    callback()
  }
}

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.password) {
    callback(new Error("两次密码不匹配"))
  } else {
    callback()
  }
}
const emit = defineEmits(['created'])

const createLoading = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  id: null,
  username: '',
  password: '',
  sex: 'MALE',
  name: '',
  phone: '',
  checkPassword: '',
})
const rulesType = reactive<FormRules>({
  username: [
    {required: true, message: '请输入账号', trigger: 'blur'},
    {min: 1, max: 30, message: '长度限制在 1 ~ 30 个字符', trigger: 'blur'},
    {validator: validateUsername, trigger: 'blur'}
  ],
  name: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
    {min: 1, max: 6, message: '长度限制在 1 ~ 6 个字符', trigger: 'blur'},
  ],
  sex: [
    {required: true, message: '请选择性别', trigger: 'blur'},
  ],
  password: [{required: true, message: '请输入密码', trigger: 'blur'}, {validator: validatePass, trigger: 'blur'}],
  checkPassword: [{required: true, message: '请再次输入密码', trigger: 'blur'}, {validator: validatePass2, trigger: 'blur'}],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (createLoading.value) {
        return
      }
      createLoading.value = true
      $api.userApi.createFrontUser(ruleForm).then(res => {
        createLoading.value = false
        ElNotification({
          title: '成功',
          message: '创建前台成功！',
          type: 'success',
        })
        emit('created')
      }).catch(() => {
        createLoading.value = false
      })
    } else {

    }
  })
}
const create = () => {
  showDialog.value = true
  dialogModel.value = 'create'
  ruleForm.id = null
  ruleForm.username = ''
  ruleForm.password = ''
  ruleForm.name = ''
  ruleForm.sex = 'MALE'
  ruleForm.phone = ''
  ruleForm.checkPassword = ''
}
// 将这个方法暴露出去,这样父组件就可以使用了哈
defineExpose({
  showDialog,
  dialogModel,
  create
})
</script>

<style scoped>

</style>